<template>
    <!-- 头部导航 -->
    <div class="nav_bg">
        <div class="center">
            <el-row>
                <el-col :span="20">
                    <ul>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                        <li><RouterLink to="/index">商城首页</RouterLink></li>
                    </ul>
                </el-col>
                <el-col :span="4">
                    <ul class="user">
                        <template v-if="!userStore.userInfo">
                            <li><RouterLink to="/reg">注册</RouterLink></li>
                            <li><RouterLink to="/login">登录</RouterLink></li>
                        </template>
                        <template v-else>
                            <li><el-link :underline="false" @click="logout">退出</el-link></li>
                            <li><RouterLink to="/center">{{userStore.userInfo.name}}</RouterLink></li>
                            <li class="cartLi"><RouterLink to="/cart"><el-icon><ShoppingCart/></el-icon></RouterLink></li>
                        </template>

                    </ul>
                </el-col>
            </el-row>
        </div>
    </div>

    <!--  头部搜索  -->
    <div class="center">
        <el-row>
            <!-- 分成24等份，span的值的和要<=24 -->
            <el-col :span="16">
                <img src="/src/assets/mi.png" style="height: 90px;" />
            </el-col>
            <el-col :span="8">
                <div class="search">
                    <!--  搜索按钮  -->
                    <el-button class="search_btn">
                        <el-icon><Search /></el-icon>
                    </el-button>
                    <!--  搜索框  -->
                    <el-input type="text" class="search_input" />
                </div>
            </el-col>
        </el-row>
    </div>

    <!--  上架的第一级分类  -->
    <div class="center">
        <ul class="category">
            <li v-for="(category, index) in parentList" :key="index"><RouterLink :to="`/productList/${category.id}`">{{ category.name }}</RouterLink></li>
        </ul>
    </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";

const router = useRouter();
const tokenStore = useTokenStore();
const userStore = useUserStore();
const parentList = ref([]);
//1. 获取父分类 2. 上架
function getParent() {
    categoryApi.selectTopCategoryList().then(result => {
        parentList.value = result.data;
    })
}

//注销
function logout() {
    //清空token
    tokenStore.$reset();
    //清空用户信息
    userStore.$reset();
    //跳转到前台首页
    router.push("/index");
}

getParent();
</script>

<style scoped>
    .cartLi .el-icon {
        top: 5px;
    }

    .nav_bg {
        background-color: var(--theme-bg-color);
        line-height: 40px;
    }

    .nav_bg ul li {
        float: left;
        margin-right: 20px;
    }

    .nav_bg .user li {
        float: right;
    }

    a {
        color: #999;
    }

    a:hover {
        color: #FFF;
    }

    .search {
        padding-top: 20px;
    }

    .search_input {
        width: 260px;
        float: right;
    }

    .search_btn {
        float: right;
        color: #FFF;
        margin-left: 5px;
        border-radius: 0px;
        border: 0px;
        background-color: var(--theme-color);
    }

    .search_btn:hover {
        background-color: wheat;
    }

    .category {
        background-color: var(--theme-color);
        line-height: 30px;
    }

    .category li {
        float: left;
        padding: 0 10px;
    }

    .category li a {
        color: #FFF;
    }

    .category li:hover {
        background-color: wheat;
    }
</style>